<template>
    <div class='layout'>
        <div class="row action-bar">
            <Row>
                <Col span="16">
                    <h2>用户管理</h2>
                </Col>
                <Col span="8" class="action-bar-flow-right">
                    <Button type="ghost" @click="modalAccount = true">
                        <Icon type="plus"></Icon>
                        新增
                    </Button>
                </Col>
            </Row>
        </div>
        <div class="row">
            <Table :data="accounts" :columns="columns" border></Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="100" :current="1"></Page>
                </div>
            </div>
        </div>

        <Modal
            v-model="modalAccount"
            title="创建用户"
            @on-ok="ok"
            @on-cancel="cancel">
            <Form ref="formAccount" :model="formAccount" :rules="ruleAccount" :label-width="80">
                <Form-item label="用户名">
                    <Input v-model="formAccount.username" type="text" placeholder=""></Input>
                </Form-item>
                <Form-item label="密码">
                    <Input v-model="formAccount.password" type="password" placeholder=""></Input>
                </Form-item>
                <Form-item label="确认密码">
                    <Input v-model="formAccount.passwordCheck" type="password" placeholder=""></Input>
                </Form-item>
                
                <Form-item label="角色">
                    <Radio-group v-model="formAccount.radio">
                        <Radio label="user">普通用户</Radio>
                        <Radio label="group_admin">群组管理员</Radio>
                        <Radio label="admin">超级管理员</Radio>
                    </Radio-group>
                </Form-item>
            </Form>
        </Modal>
    </div>
</template>

<script>
export default {
  name: 'account',
  data () {
    const validatePass = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入密码'));
        } else {
            if (this.formCustom.passwdCheck !== '') {
                // 对第二个密码框单独验证
                this.$refs.formCustom.validateField('passwdCheck');
            }
            callback();
        }
    };
    const validatePassCheck = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== this.formCustom.passwd) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    };

    return {
        modalAccount: false,
        columns:[
            { title: '用户名', key: 'username' },
            { title: '角色', key: 'role' },
            { title: '群组', key: 'groups' },
            { title: '操作' },
        ],
        accounts:[
            {username:'1001', role:'普通用户', groups:''},
            {username:'1002', role:'普通用户', groups:''}
        ],
        formAccount: {
            role: '',
            username: '',
            password: '',
            passwordCheck: '',
            radio: 'group_admin',
        },
        ruleAccount: {
            username: [
                { required: true, message: '请填写用户名', trigger: 'blur' }
            ],
            // password: [
            //     { validator: validatePass, trigger: 'blur' }
            // ],
            // passwordCheck: [
            //     { validator: validatePassCheck, trigger: 'blur' }
            // ]
        },
    }
  },
  methods: {
        ok () {
            
            this.$Message.info('点击了确定');
        },
        cancel () {
            this.$Message.info('点击了取消');
        }
  }
}
</script>
